import { View, Image, Text, Input, Button, Picker } from "@tarojs/components";
import './index.scss';
import { useEffect, useState } from "react";
import Taro, { useLoad, useRouter } from "@tarojs/taro";
import { courseInfo } from "../../configProvider";
const NewCheck = () => {

  const [courseId, setCourseId] = useState('');
  const [courseName, setCourseName] = useState('');
  const [teacher, setTeacher] = useState('');
  const [teacherId, setTeacherId] = useState('');
  const [teacherList, setTeacherList] = useState<{ name: string, code: string }[]>([]);
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const [weekday, setWeekday] = useState('');
  const [startTime, setStartTime] = useState('');
  const [endTime, setEndTime] = useState('');
  const [code, setCode] = useState('');
  const [students, setStudents] = useState<string[]>([]);
  const [studentList, setStudentList] = useState([]);

  const router = useRouter();

  useEffect(() => {
    const { course } = router.params;
    if (!course) {
      return;
    }
    const courseInfo: courseInfo = JSON.parse(course);
    console.log(courseInfo);
    setCourseId(courseInfo._id);
    setCourseName(courseInfo.courseName);
    setTeacher(courseInfo.teacher);
    setTeacherId(courseInfo.teacherId);
    setStartDate(courseInfo.startDate);
    setEndDate(courseInfo.endDate);
    setWeekday(courseInfo.weekday);
    setStartTime(courseInfo.startTime);
    setEndTime(courseInfo.endTime);
    setStudents(courseInfo.students);
  }, []);

  useLoad(() => {
    Taro.cloud.callFunction({
      name: 'getTeacherList'
    }).then((res: any) => {
      console.log('TeacherList', res.result)
      setTeacherList(res.result)
    }).catch(err => {
      console.log('Fail to call getTeacherList', err)
    });
    Taro.cloud.callFunction({
      name: 'getStudentList'
    }).then((res: any) => {
      console.log('StudentList', res.result)
      setStudentList(res.result)
    }).catch(err => {
      console.log('Fail to call getStudentList', err)
    });
    Taro.getStorage({
      key: 'code',
      success: function (res) {
        console.log(res.data)
        setCode(res.data)
      }
    })
  })
  const tryCreate = () => {
    if ([courseName, teacher, teacherId, startDate, endDate, weekday, startTime, endTime].indexOf('') !== -1) {
      Taro.showToast({ title: '请完善信息', icon: 'none', duration: 1000 })
      return;
    }
    Taro.cloud.callFunction({
      // 要调用的云函数名称
      name: 'addCourse',
      // 传递给云函数的event参数
      data: {
        courseName: courseName,
        teacher: teacher,
        teacherId: teacherId,
        startDate: startDate,
        endDate: endDate,
        weekday: weekday,
        startTime: startTime,
        endTime: endTime,
        code: code,
        active: false,
        // students: students
        students: ['10000000001', '10000000002', '10000000003', '10000000004', '10205101430']
      }
    }).then(res => {
      console.log('Success', res.result)
      Taro.showToast({
        title: '修改成功',
        icon: 'success',
        duration: 2000
      }).finally(() => {
        Taro.navigateBack()
      })
    }).catch(err => {
      console.log('Fail to call addCourse', err)
    })
  }

  return <>

    <View className="common-title">修改课程信息</View>

    <View className="common-card input-container">
      <Text>课程名称</Text>
      <Input value={courseName} className="input" onInput={(e: any) => { setCourseName(e.target.value) }} />
    </View>

    <View className="common-card input-container">
      <Text>任课教师</Text>
      <Picker range={teacherList.map((value: any) => `${value.name} ${value.code}`)} onChange={(e: any) => { console.log(e.target.value); setTeacher(teacherList[e.target.value].name); setTeacherId(teacherList[e.target.value].code) }}>
        <Text>{teacher ? teacher : '请选择教师'}</Text>
      </Picker>
    </View>

    <View className="common-card input-container">
      <Text>起止日期</Text>
      <Picker mode="date" value="" onChange={(e: any) => { console.log(e.target.value); setStartDate(e.target.value) }}>
        <Text>{startDate ? startDate : '请选择日期'}</Text>
      </Picker>
      <Text>~</Text>
      <Picker mode="date" value="" onChange={(e: any) => { console.log(e.target.value); setEndDate(e.target.value) }}>
        <Text>{endDate ? endDate : '请选择日期'}</Text>
      </Picker>
    </View>

    <View className="common-card input-container">
      <Text>上课星期</Text>
      <Picker range={week} onChange={(e: any) => { console.log(e.target.value); setWeekday(week[e.target.value]) }}>
        <Text>{weekday ? weekday : '请选择星期'}</Text>
      </Picker>
    </View>

    <View className="common-card input-container">
      <Text>起止时间</Text>
      <Picker mode="time" value="" onChange={(e: any) => { console.log(e.target.value); setStartTime(e.target.value) }}>
        <Text>{startTime ? startTime : '请选择时间'}</Text>
      </Picker>
      <Text>~</Text>
      <Picker mode="time" value="" onChange={(e: any) => { console.log(e.target.value); setEndTime(e.target.value) }}>
        <Text>{endTime ? endTime : '请选择时间'}</Text>
      </Picker>
    </View>

    <Button className="ack-button common-button" onClick={tryCreate}>确认修改信息</Button>
  </>
}
export default NewCheck;
